<template>
  <div id="app">
   <mt-header fixed :title="selected" v-show="isShow" :style="{backgroundColor:'rgb(201 253 190)'}"></mt-header>
   <div>
    <keep-alive include="list02">
    <router-view/>
    </keep-alive>
     <audio controls :src="getMiuse" class="audio" v-show="isif && getMiuse.length!=0" ></audio>
   </div>
   
    <mt-tabbar v-model="selected"  fixed @click.native="change()" v-show="isShow">
      <mt-tab-item id="首页"  >
        <img slot="icon" src="./assets/首页.png">
       首页
      </mt-tab-item>
      <mt-tab-item id="分类" >
        <img slot="icon" src="./assets/分类.png">
        分类
      </mt-tab-item>
      <mt-tab-item id="购物车" class="h1" >
        <mt-badge type="error" class="h" v-if="getList.length!=0">{{getList.length}}</mt-badge>
       <img slot="icon" src="./assets/购物车.png">
       购物车
      </mt-tab-item>
       <mt-tab-item id="我的"  >
       <img slot="icon" src="./assets/我的.png">
        我的
      </mt-tab-item>
    </mt-tabbar>



    
    
   
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
     return{
          selected:"首页",
          isShow:true,
          isif:true
      }
    },
  watch:{
   $route:{
     handler(path){
        console.log(path.path);
        if(path.path=="/detial" || 
        path.path=="/regist" || 
        path.path=="/rester" || 
        path.path=="/bycode" || 
        path.path=="/my" ||
        path.path=="/miuse"){
            this.isShow = false;
            this.isif = false;
        }else{
          this.isShow = true;
          this.isif = true;
        }
        
        if(path.path=="/"){
            this.selected = "首页";
        }
        if(path.path=="/login"){
            this.selected = "购物车";
        }
        if(path.path=="/page"){
            this.selected = "我的";
        }
        if(path.path=="/fen"){
            this.selected = "分类";
        }
        if(path.path=="/sarch"){
           this.isShow = false; 
        }
     },
     immediate:true
   }
 },
  computed:{
      getCont(){
            return this.$store.state.count;
        },
  
   getList:{
            get(){
                return this.$store.state.list;
            }
        },
    getMiuse(){
            return this.$store.state.miuse;
        },
    },
    
   
    methods:{
      
     change(){
        sessionStorage.setItem("title",this.selected);
      //  if(sessionStorage.getItem("title")){
      //     this.selected = sessionStorage.getItem("title");
      //  }else{
      //    this.selected;
      //  }

       
        if(this.selected == "首页"){
          this.$router.push("/");
          
      }else if(this.selected == "分类"){
    
          this.$router.push("/fen");
         
      }
      else if(this.selected == "购物车"){
           this.$router.push("/login");
          
      }
      else if(this.selected == "我的"){
          this.$router.push("/page");
          
      }  
      
      },
     
    },
    mounted(){
      var title = sessionStorage.getItem("title");
      if(title){
        this.selected = title;
      }
    },

    
}
</script>
<style  scoped>


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color:  #2c3e50;
 
  background-color: #e5f5ee!important ;
}

.h{
  position: absolute;
    left: 56px;
    top: 7px;
}
.h1{
  position: relative;
  
}
.audio{
  margin: 0px 0px 55px 44px;
position: fixed;

bottom: 0;
  
}
</style>